<template>
  <div>
    <div class="bind-phone aui-bg-f">
      <div class="content">
        <div class="aui-content aui-padded-b-5 aui-bg-f">
          <ul class="aui-list aui-form-list" style="background-image: none">
            <li class="aui-list-item aui-padded-t-15 van-hairline--bottom">
              <van-row>
                <van-col span="2" class="aui-text-center">
                  <i class="iconfont icon-shouji54 aui-ftn18 aui-text-6"></i>
                </van-col>
                <van-col span="22" class="aui-padded-l-10">
                  <input
                    type="text"
                    name="mobile"
                    v-model="user.mobile"
                    placeholder="手机号"
                    class="aui-ftn14"
                  />
                </van-col>
              </van-row>
            </li>

            <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
              <van-row>
                <van-col span="2" class="aui-text-center">
                  <i class="iconfont icon-yanzhengma aui-ftn18"></i>
                </van-col>
                <van-col span="16" class="aui-padded-l-10">
                  <input
                    type="text"
                    name="verify"
                    v-model="user.verify"
                    placeholder="验证码"
                    class="aui-ftn14"
                  />
                </van-col>
                <van-col span="6">
                  <div
                    class="aui-btn"
                    @click="fnVerify"
                    v-bind:class="{
                      'aui-btn-danger': !code.isSet,
                      'aui-btn-primary': code.isSet,
                    }"
                    v-cloak
                  >
                    {{ code.verify }}
                  </div>
                </van-col>
              </van-row>
            </li>
          </ul>
        </div>
      </div>
      <div
        class="aui-text-f aui-text-center aui-bg-red bind-btn"
        @click="fnSubmit"
      >
        确认绑定
      </div>
    </div>
  </div>
</template>
<script>
import User from "../../service/user.js";
import sign from "../../service/sign.js";
export default {
  name: "bindPhone",
  data() {
    return {
      user: {
        mobile: "",
        verify: "",
        uid: "",
        isToken: true,
      },
      code: {
        isSet: false,
        verify: "发送短信",
      },
    };
  },
  mounted() {
    this.user.uid = this.$store.state.uid;
    User.getBindPhone({ uid: this.user.uid, isToken: true }).then((res) => {
      console.log(res);
      if (res && res.status) {
        this.user.mobile = res.data.mobile;
      }
    });
  },
  methods: {
    // 发送短信
    fnVerify: function() {
      if (this.fnCheckMobile()) {
        if (!this.code.isSet) {
          // 短信api
          sign.fnSendMsg({ mobile: this.user.mobile }).then((res) => {
            if (res) {
              this.utils.fnMsg(res.msg);
              if (res.status) {
                this.setTime(60);
              }
            }
          });
        }
      }
    },
    // 校验手机号
    fnCheckMobile: function() {
      var mobileFormat = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if (!this.user.mobile) {
        this.utils.fnMsg("手机号码不能为空！");
        return false;
      } else if (!mobileFormat.test(this.user.mobile)) {
        this.utils.fnMsg("手机号码格式不正确！");
        return false;
      } else {
        return true;
      }
    },
    /*
     * 倒计时
     */
    setTime: function(time) {
      if (time > 0) {
        this.code.isSet = true;
        this.code.verify = time + "秒后再试";
        time = time - 1;
        var vm = this;
        setTimeout(function() {
          vm.setTime(time);
        }, 1000);
      } else {
        this.code.isSet = false;
        this.code.verify = "发送短信";
      }
    },
    fnCheckData: function() {
      if (this.fnCheckMobile()) {
        if (!this.user.verify) {
          this.utils.fnMsg("验证码不能为空！");
          return false;
        } else {
          return true;
        }
      }
    },
    // 绑定手机号
    fnSubmit: function() {
      if (this.fnCheckData()) {
        User.bindPhone(this.user).then((res) => {
          if (res) {
            this.utils.fnMsg(res.msg);
            if (res.status) {
              const vm = this;
              setTimeout(function() {
                vm.utils.fnOpenCommon(vm, {name: 'my'})
              }, 2000);
            }
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
div.bind-phone {
  padding-bottom: 30px;
  div.content {
    margin: 0 auto;
    padding-bottom: 30px;
    li {
      height: 40px;
      line-height: 40px;
      input {
        height: 36px;
        line-height: 36px;
        border: 0;
        max-width: 90%;
      }
    }
  }
  div.bind-btn {
    width: 270px;
    height: 50px;
    line-height: 50px;
    border-radius: 6px;
    margin: 0 auto;
  }
}
</style>
